<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>编辑用户</title>
    <link rel="stylesheet" th:href="@{/static/css/laypage.css}">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/static/js/jquery/jquery.min.js}"></script>
    <script th:src="@{/static/js/jquery.validation/1.14.0/jquery.validate.min.js}"></script>
    <script th:src="@{/static/js/jquery.validation/1.14.0/messages_zh.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/laypage/1.2/laypage.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/layer/layer.js}"></script>
    <style>
        input.error{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="addUserForm">
        <br>
        <div class="form-group">
            <label for="userId" >用户ID：</label>
            <input type="text" class="form-control" id="userId" name="userId" th:value="${user.userId}" readonly>
        </div>
        <div class="form-group">
            <label for="userName">姓　名：</label>
            <input type="text" class="form-control" id="userName" name="userName" th:value="${user.userName}" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="userPhone">手机号：</label>
            <input type="text" class="form-control" id="userPhone" name="userPhone" th:value="${user.userPhone}" placeholder="请输入手机号">
        </div>
        <div class="form-group">
            <label>身　份：</label>
            <input type="radio" id="vipUser"  class="userVip" value="1" name="userVip">vip用户
            <input type="radio" id="publicUser" class="userVip" value="0" name="userVip">普通用户
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">提交</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>

<script>
    var checkVip=[[${user.userVip}]];
    if(checkVip==1){
        $("#vipUser").attr("checked",true)
    }else{
        $("#publicUser").attr("checked",true)
    }
    var editUser=function () {
        if(!check().form()){
            return;
        }

        $.ajax({
            type:"POST",
            //dataType:"json",
            url:"/user/userEdit",
            data:{
                userId:[[${user.userId}]],
                userName: $("#userName").val(),
                userPhone: $("#userPhone").val(),
                userVip: $("input[name='userVip']:checked").val(),
            },
            success:function (msg) {
                $("#cancelBtn").click();
            }

        });
    };

    $('#saveBtn').on('click', function(){
        editUser();
    });

    $('#cancelBtn').on('click', function(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.getAllUser();
        parent.layer.close(index);
    });

    /*验证输入内容*/
    function check() {
        return $("#addUserForm").validate({
            rules:{
                userName:{required:true},
                userPhone:{required:true},
            },
            messages:{
                userName:{required:""},
                userPhone:{required:""},
            }
        });
    }

</script>
</body>
</html>
